<template>
  <div class="a">
    <el-card class="info">
      <div class="b">
        <span class="c">增添员工表单</span>
      </div>
      <el-form
        ref="creatFormRef"
        :model="creatForm"
        label-width="80px"
        :rules="creatFormRules"
      >
        <el-form-item label="姓名" prop="name">
          <el-input v-model="creatForm.name"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="creatForm.mobile"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="check">
          <el-input v-model="creatForm.check" style="width: 100px"></el-input>
          <el-button type="primary" plain @click="send" class="send">发送验证码</el-button>
        </el-form-item>
        <el-form-item label="部门" prop="department">
          <el-select
            v-model="creatForm.department"
            placeholder="请选择活动区域"
          >
            <el-option label="设计部" value="shanghai"></el-option>
            <el-option label="研发部" value="beijing"></el-option>
            <el-option label="销售部" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职务" prop="job">
          <el-input v-model="creatForm.job"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="creat" class="creation"
            >立即创建</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    var checkMobile = (rule, value, cb) => {
      const regMobile = /^0?(13[0-9]|15[012356789]|17[013678]|18[0-9]|14[57])[0-9]{8}$/;
      if (regMobile.test(value)) {
        return cb();
      }
      cb(new Error("请输入正确的手机号"));
    };
    return {
      creatForm: {
        name: "",
        mobile: "",
        check: "",
        department: "",
        job: "",
      },
      creatFormRules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        mobile: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { validator: checkMobile, trigger: "blur" },
        ],
        check: [
          { required: true, message: "请输入验证码", trigger: "blur" },
          {
            min: 4,
            max: 4,
            message: "请输入正确的四位验证码",
            trigger: "blur",
          },
        ],
        job: [{ required: true, message: "请输入职务", trigger: "blur" }],
        department: [
          { required: true, message: "请选择部门", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    send() {
      this.$message({
        message: "成功发送，请注意接收验证码",
        type: "success",
      });
    },
    creat() {
      this.$refs.creatFormRef.validate((valid) => {
        if (!valid) return this.$message.error();('登陆失败');
        return this.$message({
          message: "创建成功！",
          type: "success",
        });

      });
      this.$refs.creatFormRef.resetFields();
    },
    resetcreatForm() {
      this.$refs.creatFormRef.resetFields();
    },
  },
};
</script>

<style scoped>
.el-input {
  width: 230px;
  font-size: px;
}

.info {
  height: 450px;
  background-color: #FFFFFF;
  width: 400px;
  text-align: center;
  margin: 50px auto;
  padding-top: 50px;
  padding-left: 100px;
  padding-right: 100px;
  padding-bottom: 100px;
  border-width: 2px;
}

.send {
  height: 30;
  text-align: center;
  margin: 10px;
}

.creation {
  left: 50%;
}
.a {
  height: 100%;
  width: 100%;
  border-width: 2px;
}
.b {
  height: 100px;
  text-align: center;
}
.c {
  padding-top: 10px;
  margin-botton: 20px;
  font-size: 50px;
  font-weight: 300;
}
</style>
